<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-row>
          <el-col :span="14" style="padding-right: 20px">
            <el-card style="display: inline-block">
              <div slot="header" >
                <i class="el-icon-s-help" style="margin-right: 5px"></i>
                <span>作品概述</span>
                <el-tooltip effect="dark" content="孟凡乐毕设，项目倾心制作" placement="left">
                  <i class="el-icon-info" style="float: right"></i>
                </el-tooltip>
              </div>
              <div>
                <p><strong>项目名：</strong><a href="https://gitee.com/codeguyan/ovester">基于Springboot的定制化题库问答系统的设计与实现</a></p>
                <p style="margin-bottom: 5px"><strong>项目介绍：</strong></p>
                <p>&nbsp;随着计算机技术、互联网技术的快速发展，人们的学习和工作都迎来了很大的挑战。越来越多的学生和求职者等身份的人群开始使用互联网设备获取网络信息以备战考试。在这样的背景下，越来越多的题库问答系统开始崭露头角，但是目前的问答系统在个性化、易用性、高效性方面还存在着严重的不足，不能针对使用者的实际情况进行组卷，题目不能由使用者自定义编辑等。在模拟备战时引入定制化题库问答系统可以高效的掌握不足的知识点，并可以根据图形化数据分析界面直观的了解自己对各个领域的掌握程度。</p>
                <p>&nbsp;项目主要包含<strong>登录模块</strong>、<strong>问答模块</strong>、<strong>题库管理模块</strong>及<strong>管理员审批模块</strong>。</p>
                <p>—— 孤 焰</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-card>
                <div slot="header" >
                  <i class="el-icon-link" style="margin-right: 5px"></i>
                  <span>快捷方式</span>
                </div>
                <el-row>
                  <el-button class="button-area" icon="el-icon-eleme" size="medium" @click="toCommonBank">公共题库</el-button>
                  <el-button class="button-area" icon="el-icon-connection" size="medium" @click="toPrivateBank">私人题库</el-button>
                  <el-button class="button-area" icon="el-icon-data-analysis" size="medium" @click="toAnalyze1">数据分析</el-button>
                  <el-button class="button-area" icon="el-icon-s-custom" size="medium" @click="toUser">用户授权</el-button>
                  <el-button class="button-area" icon="el-icon-user" size="medium" @click="toRole">角色管理</el-button>
                  <el-button class="button-area" icon="el-icon-tickets" size="medium" @click="toBankReview">题库审批</el-button>
                </el-row>
              </el-card>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-card>
                <div slot="header" >
                  <i class="el-icon-document-checked" style="margin-right: 5px"></i>
                  <span>待办事项</span>
                </div>
                <el-row>
                  <el-button class="button-area">
                    <el-row>待审用户</el-row>
                    <el-row style="margin-top: 15px;font-size: 25px">{{userNotReviewCount}}</el-row>
                  </el-button>
                  <el-button class="button-area">
                    <el-row>待审题库</el-row>
                    <el-row style="margin-top: 15px;font-size: 25px">{{questionBankAuditCount}}</el-row>
                  </el-button>
                </el-row>
              </el-card>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-card>
            <div slot="header" >
              <i class="el-icon-data-line" style="margin-right: 5px"></i>
              <span>数据概览</span>
            </div>
            <el-row>
              <span class="counter-text">最近提交题目显示个数</span>
              <el-input-number v-model="xQuestionData.count" @change="getXQuestionData" :min="1" :max="15" label="描述文字"></el-input-number>
              <QuestionDataLineChart
                  width="100%"
                  :x-data="xQuestionData.modifyTimeList"
                  :correct-data="xQuestionData.correctData"
                  :uncertain-data="xQuestionData.uncertainData"
                  :mistake-data="xQuestionData.mistakeData"></QuestionDataLineChart>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-card class="doughnutChart-style">
            <div slot="header">
              <i class="el-icon-s-marketing" style="margin-right: 5px"></i>
              <span>题目答题总统计</span>
            </div>
            <DoughnutChart
                width="450px"
                height="450px"
                :series-data="doughnutChart.seriesData"></DoughnutChart>
            <el-button type="success" @click="toAnswer">开始答题</el-button>
          </el-card>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-card class="thanks">
            <div slot="header">
              <i class="el-icon-s-promotion" style="margin-right: 5px"></i>
              <span>作者致词</span>
              <el-tooltip effect="dark" content="项目截稿日期：2022/1/18" placement="left">
                <i class="el-icon-info" style="float: right"></i>
              </el-tooltip>
            </div>
            <div class="font-style">
              <p>你知道的越多，不知道的也就越多 ——孤焰</p>
              <p>希望小伙伴们都可以收到满意的意向书！！</p>
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DoughnutChart from '@/components/echarts/DoughnutChart'
import QuestionDataLineChart from '@/components/echarts/QuestionDataLineChart'
import { get } from '@/plugins/axios'

export default {
  name: "index",
  components: {
    DoughnutChart,
    QuestionDataLineChart
  },
  created() {
    this.getAllCount()
    this.getXQuestionData()
    this.getUserNotReview()
    this.getQuestionBankAuditCount()
  },
  data() {
    const module = '/userQuestionData'
    return {
      userId: this.$route.query.userId,
      uri: {
        allCount: module + '/allCount',
        xQuestionData: module + '/xQuestionData',
        userNotReview: '/user/notReview',
        questionBankAuditCount: '/questionBankAudit/getQuestionBankAuditCount'
      },
      doughnutChart: {
        seriesData: []
      },
      xQuestionData: {
        count: 5,
        modifyTimeList: [],
        correctData: [],
        uncertainData: [],
        mistakeData: []
      },
      userNotReviewCount: 0,
      questionBankAuditCount: 0
    }
  },
  methods: {
    getAllCount() {
      const params = {
        userId: this.userId
      }
      if (!params.userId) {
        params.userId = this.$store.getters.GET_ACCOUNT.id
      }
      get(this.uri.allCount, params, response => {
        if (response.code === 200) {
          this.doughnutChart.seriesData.push({
            value: response.data.correctCount,
            name: '正确数'
          })
          this.doughnutChart.seriesData.push({
            value: response.data.uncertainCount,
            name: '不确定数'
          })
          this.doughnutChart.seriesData.push({
            value: response.data.mistakeCount,
            name: '错误数'
          })
        }
      })
    },
    getXQuestionData() {
      const params = {
        userId: this.userId,
        count: this.xQuestionData.count
      }
      if (!params.userId) {
        params.userId = this.$store.getters.GET_ACCOUNT.id
      }
      get(this.uri.xQuestionData, params, response => {
        if (response.code === 200) {
          this.xQuestionData.modifyTimeList = response.data.modifyTimeList
          this.xQuestionData.correctData = response.data.correctList
          this.xQuestionData.uncertainData = response.data.mistakeList
          this.xQuestionData.mistakeData = response.data.uncertainList
        }
      })
    },
    getUserNotReview() {
      get(this.uri.userNotReview, {}, response => {
        if (response.code === 200) {
          this.userNotReviewCount = response.data
        }
      })
    },
    getQuestionBankAuditCount() {
      get(this.uri.questionBankAuditCount, {}, response => {
        if (response.code === 200) {
          this.questionBankAuditCount = response.data
        }
      })
    },
    toCommonBank() {
      this.$router.push({path: '/question/commonBank'})
    },
    toPrivateBank() {
      this.$router.push({path: '/question/privateBank'})
    },
    toAnalyze1() {
      this.$router.push({path: '/analyze1'})
    },
    toUser() {
      this.$router.push({path: '/user'})
    },
    toRole() {
      this.$router.push({path: '/role'})
    },
    toBankReview() {
      this.$router.push({path: '/question/questionBankReview'})
    },
    toAnswer() {
      this.$router.push({path: '/answer'})
    }
  }
}
</script>

<style scoped lang="less">
p{
  font-family: Hiragino Sans GB;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 13px;
}
.button-area {
  margin-right: 10px;
  margin-top: 5px;
  background: #f2f2f2
}
.el-button + .el-button {
  margin-left: 0;
}
.doughnutChart-style {
  float: right;
  text-align: center
}
.counter-text {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  margin-right: 10px;
}
.thanks {
  float: right;
  width: 490px;
  .font-style {
    color: #606266;
  }
}
</style>